<template>
  <div class="bigbox">
    <div class="userbox">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>
      <!-- 以下是element-ui表单 -->
      <el-form
        :model="logFormdata"
        :rules="rules"
        ref="logFormdata"
        label-width="0"
        class="demo-ruleForm"
      >
        <!-- 删除了label属性,将单行文本框宽度占满一行 -->
        <el-form-item prop="logname">
          <el-input
            prefix-icon="el-icon-user"
            v-model="logFormdata.logname"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item prop="logpwd">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="logFormdata.logpwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('logFormdata')"
            class="reg-btn"
            >登录</el-button
          >
          <!-- <el-button @click="resetForm('logFormdata')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/admin.js"
export default {
  data() {
    return {
      logFormdata: {
        logname: "",
        logpwd:''
      
      },
      rules: {
        logname: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { 
            pattern: /^[a-zA-Z\d]{3,12}$/,
            message: "用户名在3-12位之间",
            trigger: "blur" },
        ],
        logpwd: [
          { required: true, message: "密码不能为空", trigger: "change" },
          {
            pattern: /^[a-zA-Z\d]{6,12}$/,
            message: "密码在6-12位之间",
            trigger:"blur"
          }
        ],
      
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log(this.logFormdata.logname);
          console.log(this.logFormdata.logpwd);
          // 1.获取登陆的用户名和密码
          let data={
            logname : this.logFormdata.logname,
            logpwd: this.logFormdata.logpwd
          }

          // 2.发送请求到服务器(api里面admin.js添加login方法封装)
          login(data)
          .then((res)=>{
            console.log(res);
            if(res.data.code === 0){
              //将token的值和用户名保存到本地
              // console.log(res.data); 
              localStorage.setItem("token",res.data.token);
              localStorage.setItem("logname",res.data.logname)
              this.$message({
                message: "登录成功",
                type: "success"
              })
              this.$router.push("/index")
            }else {
              this.$message.error("登录失败")
            }
          })
          // 3.根据返回结果弹出提示信息
          // 如果成功跳转到index.js
          // 失败不跳转 给出提示信息(可以清空登陆表单)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
// 表示router-link被激活之后的样式
.router-link-active {
  font-weight: bold;
  color: orangered;
  border-bottom: 2px solid orangered;
}
.reg-btn {
  width: 100%;
}
.el-input {
  margin-bottom: 30px;
}

.bigbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("https://img0.baidu.com/it/u=3396586749,1891687663&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
    no-repeat;
  background-size: cover;

  .userbox {
    width: 400px;
    min-height: 300px;
    background: #fff;
    border-radius: 10px;
    margin: 150px 550px;
    padding: 20px 30px;

    .title {
      text-align: center;
      margin-bottom: 40px;
      a {
        font-size: 20px;
        margin: 0px 15px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>